<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Mootools UI - Delegation demo</title>
    <script type="text/javascript" src="../mootools-1.2-core-nc.js"></script>
    <script type="text/javascript" src="../mui.delegate.js"></script>
    <script type="text/javascript">
    
	MUI.delegate(".clicker", "click", function(){
            var sm = this.getNext();
            var dis = sm.getStyle("display");
            sm.setStyle("display", dis=="none"?"block":"none");
        });
        
        window.addEvent("domready", function(){
            $("btn").addEvent("click", function(){
                var sp = new Element("div", {"class":"clicker"}).appendText("Click me 2").injectAfter($("show-me"));
                new Element("p").setStyle("display", "none").appendText("show me 2").injectAfter(sp);
            });
        });

    
    </script>
</head>
<body>
    <div class="clicker">Click me</div>
    <p id="show-me" style="display:none;">Show Me</p>
    
    <form action=""><input type="button" id="btn" value="add" /></form>
</body>
</html>
